<template>
	<view>
		<view class="u-page">
			<view class="card">
				<view class="baseInfo">
					<image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
<!-- 					<view class="avatar-open">
						<open-data type="userAvatarUrl"></open-data>
					</view> -->
					<view class="name">{{userInfo.userName}}</view>
				</view>
				<view class="qrcode">
					<uqrcode ref="uQRCode" :text="qrtext" size="250"  margin="10" foregroundColor="#333" v-if="qrtext"/>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	import sceneMixins from '@/utils/sceneMixins';
	export default {
		options: { styleIsolation: 'shared' },
		mixins: [sceneMixins],
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				API_PREFIX: this.API_PREFIX,
				defaultAvatar: this.API_PREFIX + '/mobile/wxImages/mime/avatar.png',
				qrtext: ''
			}
		},
		onLoad() {
				var vm = this;
				vm.doWxLogin().then(res => {
					vm.openId = res.openId;
					vm.qrtext = 'userInfo-' + vm.openId;
				});
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.u-page {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 150rpx;
	}
	.card {
		background: url('/static/imgs/qrbg.png');
		width: 680rpx;
		height: 806rpx;
		background-size: 100% 100%;
		position: relative;
		.baseInfo {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			padding: 35rpx 40rpx;
			.avatar-open {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
			}
			.avatar {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
	
		}
		.qrcode {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
		}
	}
</style>
